<template>
  <div>
    <el-card class="box-card">
      <h3>注册页面</h3>
      <el-form
        :model="userform"
        :rules="userrul"
        ref="userref"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userform.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userform.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="name">
          <el-input v-model="userform.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model="userform.tel"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="userform.sex" placeholder="请选择">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resect">重置</el-button>
          <el-button type="primary" @click="reg">注册</el-button>
          <span class="nouser">已有账号?,快速登录</span
          ><router-link to="/sign">
            <span class="recest">点我登录</span>
          </router-link>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import navlist from "./navlist.vue";
import $ from "jquery";
export default {
  components: { navlist },
  name: "VueUserreg",

  data() {
    //校验手机号
    var checkMobile = (rule, value, cb) => {
      const regMobile = /^1[3456789]\d{9}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      //返回一个错误提示
      cb(new Error("请输入合法的手机号码"));
    };
    return {
      userform: {
        username: "",
        password: "",
        name: "",
        tel: "",
        sex: "0",
      },
      //校验
      userrul: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        tel: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: checkMobile,
            trigger: "blur",
          },
        ],
        sex: [],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 8, message: "长度在 4 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    reg() {
      this.$refs.userref.validate(async (value) => {
        if (!value) return this.$message.error("请填写完整");
        $.post(
          "http://bufantec.com/api/test/user/save",
          this.userform,
          (res) => {
            if (res.code == "success") {
              this.$message.success("注册成功,5s后跳到登录页面");
              //跳到登录页面
              setTimeout(() => {
                this.$router.push({
                  path: "/sign",
                });
              }, 5000);
            } else {
              return this.$message.error("注册失败");
            }
          }
        );
      });
    },
    resect() {
      this.$refs.userref.resetFields();
    },
  },
};
</script>

<style  scoped>
.recest {
  margin-left: 20px;
  color: #f0f;
  vertical-align: baseline;
}
.nouser {
  margin-left: 600px;
  vertical-align: baseline;
}
h3 {
  text-align: center;
  margin: 20px;
}
</style>